<!--档案管理-->
<template>
  <div class="order">
    <div v-if="isPreview">
      <div style="display: flex; justify-content: space-between">
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
          <el-form-item label='档案编号'>
            <el-input v-model='formInline.companyName'></el-input>
          </el-form-item>
          <el-form-item label='所属类别'>
            <el-select v-model="value1" placeholder="请选择">
              <el-option
                v-for="item in data2"
                :key="item.value"
                :value="item.value"
                :label="item.label"
                :disabled="item.disabled">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label='开始时间'>
            <el-date-picker
              v-model="formInline.value1"
              type="date"
              placeholder="选择日期"
              :picker-options="pickerOptions0">
            </el-date-picker>
          </el-form-item>

          <el-form-item label='结束时间'>
            <el-date-picker
              v-model="formInline.value2"
              type="date"
              placeholder="选择日期"
              :picker-options="pickerOptions1">
            </el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="searchList">查询</el-button>
            <el-button type="default" @click="resetFormConditions">重置</el-button>
            <el-button type="primary" @click="addRole" class="addBtn">新增</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="tables">
        <el-table ref="multipleTable" :data="tablesAnnual" tooltip-effect="dark" style="width: 100%" @selection-change="">
          <el-table-column type="index" label="序号" width="50">
          </el-table-column>
          <el-table-column prop="companyName" label="单位名称">
          </el-table-column>
          <el-table-column prop="their" label="所属类别">
          </el-table-column>
          <el-table-column prop="fileNumber" label="档案编号">
          </el-table-column>
          <el-table-column prop="fileName" label="档案名称">
          </el-table-column>
          <el-table-column prop="dutyOfficer" label="责任人">
          </el-table-column>
          <el-table-column prop="archivingTime" label="存档时间">
          </el-table-column>
          <el-table-column fixed="right" label="操作" width="200">
            <template slot-scope="scope">
              <el-button type="text" size="small" @click='revamp(scope.row)'>预览</el-button>
              <el-button type="text" size="small" @click='download(scope.row)'>下载</el-button>
              <el-button type="text" size="small" @click='deleteRole(scope.row)'>删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 30, 40]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
      <!--新增-->
      <el-dialog
        title="档案管理新增"
        :visible.sync="recordAdd"
        size="tiny">
        <el-form :model="templateForm" class="templateFroms">
          <el-form-item label="单位名称"  label-width="150px">
            <el-input :disabled="true" clearable v-model="templateForm.companyName" placeholder="单位名称"></el-input>
          </el-form-item>
          <el-form-item label="档案编号"  label-width="150px">
            <el-input :disabled="true" clearable v-model="templateForm.fileNumber" placeholder="危废类型"></el-input>
          </el-form-item>
          <el-form-item label="档案名称"  label-width="150px" >
            <el-input type="text" clearable v-model="templateForm.fileName" placeholder="危废代码"></el-input>
          </el-form-item>
          <el-form-item label="所属类别"  label-width="150px" >
            <el-input type="text" clearable v-model="templateForm.their" placeholder="年度"></el-input>
          </el-form-item>
          <el-form-item label="责任人"  label-width="150px" >
            <el-input type="text" clearable v-model="templateForm.dutyOfficer" placeholder="年度"></el-input>
          </el-form-item>
          <el-form-item label="存档时间 "  label-width="150px" >
            <el-input type="text" clearable v-model="templateForm.archivingTime" placeholder="年度"></el-input>
          </el-form-item>
          <el-form-item label="档案上传 "  label-width="150px" >
            <el-upload
              class="upload-demo"
              ref="upload"
              action="http://192.168.1.114:8088/file/upload"
              :on-preview="handlePreview"
              :on-remove="handleRemove"
              :on-error="handleerror"
              :auto-upload="false"
              list-type="picture"
              accept=".pdf"
              multiple
              :limit="3"
            >
              <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
              <el-button
                style="margin-left: 10px;"
                size="small"
                type="success"
                @click="submitUpload"
              >上传到服务器</el-button>
            </el-upload>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button type="primary" @click="saveUpload">保 存</el-button>
          <el-button type="primary" @click="saveAbolish">取 消</el-button>
        </div>
      </el-dialog>
      <!--修改-->
    </div>
    <div v-if="!isPreview">
      <div style="margin-bottom: 20px;">
        <el-button type='text' size='medium' @click='goBack'>返回</el-button>
        <div class="pdf">
          <iframe id="show-iframe" :src="pdf" >
            This browser does not support PDFs. Please download the PDF to view it: <a href="/test.pdf" rel="external nofollow" >Download PDF</a>
          </iframe>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        // 新增
        recordAdd:false,
        isPreview:true,
        templateForm:{
          companyName:'',
          fileNumber:'',
          fileName:'',
          their:"",
          dutyOfficer:'',
          archivingTime:'',
        },

        // 操作
        tablesAnnual: [
          {
            id:'1',
            companyName:'纽创产废单位',
            their:'环保档案',
            fileNumber:'QX-20190206-005',
            fileName:'产废环保档案',
            dutyOfficer:'小王',
            archivingTime:'2019年2月6日',
          }
        ],

        //查询
        value1:'',
        data2: [{
          value:2,
          label:'处置单位',
        },{
          value:4,
          label:'运营单位',
        },{
          value:7,
          label:'处置与运营单位',
        }],
        formInline: {
          companyName:'',
          companyType:"",
          temName:"",
        },
        currentPage: 1,
        total: 10,
        page: 1,
        limit: 10,
      }
    },
    mounted() {

    },
    methods: {
      //查询
      searchList() {

      },
      //重置
      resetFormConditions() {
      },
      //新增
      addRole() {
        this.recordAdd = true
      },
      //修改
      revamp(row){
        this.pdf = 'http://storage.xuetangx.com/public_assets/xuetangx/PDF/PlayerAPI_v1.0.6.pdf'
        this.isPreview =false
      },

      handleSizeChange(val) {
      },
      //页数
      handleCurrentChange(val) {
      },
      //保存年度申报新增
      saveUpload(){
        this.recordAdd = false

      },
      saveAbolish(){
        this.recordAdd = false
      },
      pickerOptions0(){

      },
      pickerOptions1(){

      },
      download(){
        this.$confirm("是否下载此档案？, 是否继续?", "温馨提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消"
        })
          .then(() => {
            this.$message({
              type: "info",
              message: "已确定"
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消"
            });
          });
      },
      //删除
      deleteRole(row) {
        this.$confirm("是否删除此档案？, 是否继续?", "温馨提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消"
        })
          .then(() => {
            this.$message({
              type: "info",
              message: "已删除"
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消"
            });
          });
      },
      // 返回
      goBack(){
        this.isPreview = true
      },
      //文件上传
      submitUpload() {
        this.$refs.upload.submit();
      },
      handleRemove(file) {
        console.log(file);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleerror(err, file) {
        console.log(err);
        console.log(file);
      },
    },
    components: {}
  }

</script>
<style lang="scss">
  .pdf{
    width: 100%;
    height: calc(100vh - 20vh);
  }
  .pdf iframe{
    width: 100%;
    height: 100%;
  }
</style>
